import {Card, DatePicker} from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable, {ActionType} from '@ant-design/pro-table';
import type {TableListItem} from './data.d';
import {queryFTXdHedging} from './service';
import {
  columnsSorter,
  columnToColumnsState,
  empty,
  formatDate,
  getNowFormatDate,
  NumberDiv,
  reRedAndGreen
} from "@/utils/function";
import {queryUse} from "@/utils/service";
import {getSelectList} from "@/pages/BTCList/getSelectList";

const FTXdHedging: React.FC = () => {
  let columns: any[] = [

    // "symbol": "BTCDOMUSDT",                    // 交易对
    // "positionNum": 5.655,                              // 持仓数量
    // "currentPrice": 960.8,                              // 当前价格
    // "averagePrice": 1015.20226847,            // 持仓均价
    // "positionPrice": 985.3973054963,         // 持仓成本
    // "positionNetWorth": 5433.3240,             // 持仓净值
    // "positionProfit": -139.0977625815765,  //  持仓盈亏
    // "totalProfit": -128.9515694015765         // 浮动盈亏
    {
      title: "交易对",
      dataIndex: 'symbol',
      key: 'symbol',
      fixed: "left",
      width: 100,
      tip: '交易对是唯一的 key',
    },
    {
      title: "持仓数量",
      width: 120,
      dataIndex: 'positionNum',
      key: 'positionNum',
      renderText: (val: string | number) => NumberDiv(val,1,4)
    },
    {
      title: "当前价格",
      width: 120,
      dataIndex: 'currentPrice',
      key: 'currentPrice',
      renderText: (val: string | number) => NumberDiv(val,1,4)
    },
    {
      title: "持仓均价",
      width: 120,
      dataIndex: 'averagePrice',
      key: 'averagePrice',
      renderText: (val: string | number) => NumberDiv(val,1,4)
    },
    {
      title: "持仓成本",
      width: 120,
      dataIndex: 'positionPrice',
      key: 'positionPrice',
      renderText: (val: string | number) => NumberDiv(val,1,4)
    },
    {
      title: "持仓净值",
      width: 120,
      dataIndex: 'positionNetWorth',
      key: 'positionNetWorth',
      renderText: (val: string | number) => NumberDiv(val,1,4)
    },
    {
      title: "持仓盈亏",
      width: 120,
      dataIndex: 'positionProfit',
      key: 'positionProfit',
      renderText: (val: string | number) => NumberDiv(val,1,4)
    },
  {
      title: "资金费用",
      width: 120,
      dataIndex: 'fundingFee',
      key: 'fundingFee',
      renderText: (val: string | number) => NumberDiv(val,1,4)
    },
  {
      title: "浮动盈亏",
      width: 120,
      dataIndex: 'totalProfit',
      key: 'totalProfit',
      renderText: (val: string | number) => reRedAndGreen(NumberDiv(val,1,4))
    },
  {
      title: "最近交易时间",
      width: 140,
      dataIndex: 'lastTradeTime',
      key: 'lastTradeTime',
      renderText: (val: string | number) => formatDate(val,false)
    },
  ];
  columnsSorter("FTXdHedgingFTX合约对冲收益统计", columns);
  const [col, setCol] = useState<any>(columnToColumnsState(columns));
  const [dataTable, setDataTable] = useState<any>(null);
  const [dateS, setDateS] = useState<any>(null);
  const [dateE, setDateE] = useState<any>(null);
  const actionRef = useRef<ActionType>();
  useEffect(() => {
    getSelectList("22","FTXdHedging", actionRef).then(
      (selectList: React.ReactNode)=>{
        setDataTable(<ProTable<TableListItem>
          headerTitle={""}
          rowKey="key"
          bordered
          actionRef={actionRef}
          columnsStateMap={col}
          onColumnsStateChange={(e) => {
            if (!empty(e)) {
              localStorage.setItem("FTXdHedgingFTX合约对冲收益统计", JSON.stringify(e));
              setCol(e);
            }
          }}
          toolBarRender={() => [
            <div>{selectList}</div>,
            <div>
              选择起始日期:&nbsp;&nbsp;
              <DatePicker
                // showTime
                format="YYYY-MM-DD"
                placeholder="请选择"
                style={{width: 200, margin: 20, marginLeft: 10}}
                onChange={(e) => {
                  setDateS(getNowFormatDate((e ? e : null)));
                }}
              />
            </div>,
            <div>
              选择结束日期:&nbsp;&nbsp;
              <DatePicker
                // showTime
                format="YYYY-MM-DD"
                placeholder="请选择"
                style={{width: 200, margin: 20, marginLeft: 10}}
                onChange={(e) => {
                  setDateE(getNowFormatDate((e ? e : null)));
                }}
              />
            </div>,
          ]}
          params={{dateS,dateE}}
          pagination={false}
          scroll={{ y: 666}}
          search={false}
          request={async (params , sort, filter) => {
            //console.log(sort, filter);
            const msg = await queryFTXdHedging(params);
            let data = queryUse(msg)
            //sum
            let sumItem: any = {
              tid:9999,
              symbol: "合计",
              positionPrice: 0,
              positionNetWorth: 0,
              positionProfit: 0,
              totalProfit: 0,
              fundingFee: 0,
            }
            for (let i = 0; i < data.length; i++) {
              const item = data[i];
              sumItem.positionPrice += (item.positionPrice ? item.positionPrice : 0);
              sumItem.positionNetWorth += (item.positionNetWorth ? item.positionNetWorth : 0);
              sumItem.positionProfit += (item.positionProfit ? item.positionProfit : 0);
              sumItem.totalProfit += (item.totalProfit ? item.totalProfit : 0);
              sumItem.fundingFee += (item.fundingFee ? item.fundingFee : 0);
            }
            data.unshift(sumItem)

            if (data) {
              return {
                data: data,
                // success 请返回 true，
                // 不然 table 会停止解析数据，即使有数据
                success: true,
                // 不传会使用 data 的长度，如果是分页一定要传
                // total: number,
              };
            } else {
              return {
                data: data,
                success: false,
              };
            }
          }}
          columns={columns}
        />)
      });
  }, [dateS,dateE,col]);
  //处理同步数据

// debugger
  return (
    <PageContainer>
      <Card>
        {dataTable}
      </Card>
    </PageContainer>
  );
};

export default FTXdHedging;


